<template>
<div class="user-manage">
  <search-table :url="url" ref="searchtable" :columns="columns" :form="form">
    <template slot="searchForm">
      <a-form layout="inline" :form="form">
        <a-form-item label="姓名">
          <a-input
            v-decorator="[
              'userName',
            ]"
            placeholder="请输入姓名"
          >
          </a-input>
        </a-form-item>
        <a-form-item label="手机号">
          <a-input
            v-decorator="[
              'userPhone',
            ]"
            placeholder="请输入手机号"
          >
          </a-input>
        </a-form-item>
        <a-form-item label="身份类型">
          <a-select
              showSearch
              allowClear
              style="width: 150px"
              :options="userIdTypeOptions"
              v-decorator="[
                'userIdType',
              ]"
              placeholder="请选择"
            >
            </a-select>
        </a-form-item>
        <a-form-item label="状态">
          <a-select
              showSearch
              allowClear
              style="width: 150px"
              :options="showStatusList"
              v-decorator="[
                'userStatus',
              ]"
              placeholder="请选择"
            >
            </a-select>
        </a-form-item>
      </a-form>
    </template>
    <template slot="oprationRow">
      <permission authority="shop:user:add"> <!-- -->
        <a-button type="primary" icon="plus" @click="openInfo()">新增员工</a-button>
      </permission>
      <permission authority="shop:user:export">
        <a-button @click="exportExcel()">导出</a-button>
      </permission>
      <permission authority="shop:user:delete"><!---->
        <a-button @click="deleteRows($refs.searchtable.selectedRowKeys)">删除</a-button>
      </permission>
    </template>
    <template slot="tableOperation" slot-scope="{record}">
      <a-space>
        <permission authority="shop:user:modify"> <!---->
          <span class="text-primary pointer" @click="openInfo(record)">编辑</span>
        </permission>
        <permission authority="shop:user:delete"><!----><!--danger-->
          <span class="text-primary pointer" @click="deleteRows([record.id])">删除</span>
        </permission>
        <permission authority="shop:user:modify"> <!---->
          <span class="text-primary pointer" @click="openStop(record)">
            <template v-if="record.userStatus==1">停用</template>
            <template v-else>启用</template>
          </span>
        </permission>
        <!--
        <permission>
          <span class="text-danger pointer" @click="resetPas(record)">重置密码</span>
        </permission> -->
      </a-space>
    </template>
  </search-table>
  <user-info :record="currentRecord" @cancel="closeInfoModal" :visible="infoVisible" />
</div>
</template>
<script>
import UserInfo from './components/UserInfo'
import { mapState } from 'vuex'
// import {findDictNameByValue, createOptionsByDict} from '@/utils/dict'
export default {
  name: 'Role',
  data () {
    return {
      roleIdTypeOptions: [],
      userIdTypeOptions: [
        {
          label: '店长',
          value: 1
        }, {
          label: '店员',
          value: 2
        }
      ],
      url: '/shop/user/page',
      showStatusList: [
        {
          label: '禁用',
          value: 0
        }, {
          label: '启用',
          value: 1
        }
      ],
      infoVisible: false,
      currentRecord: {},
      form: this.$form.createForm(this, { name: 'table_search' }),
      columns: [
        {
          title: '编号',
          dataIndex: 'id',
          key: 'id'
        },
        {
          title: '登录账号',
          dataIndex: 'userPhone',
          key: 'loginPhone'
        },
        {
          title: '姓名',
          dataIndex: 'userName',
          key: 'userName'
        },
        {
          title: '手机号',
          dataIndex: 'userPhone',
          key: 'userPhone'
        },
        {
          title: '所属机构',
          dataIndex: 'orgName',
          key: 'orgName'
        },
        {
          title: '最后操作时间',
          dataIndex: 'updateDate',
          key: 'updateDate'
        },
        {
          title: '身份类型',
          dataIndex: 'userIdType', // 员工身份类型1店长2店员
          key: 'userIdType',
          customRender: (text, row) => {
            if (text == 1) {
              return '店长'
            } else if (text == 2) {
              return '店员'
            }
            return '未知'
          }
        },
        {
          title: '用户角色',
          dataIndex: 'userRoleName',
          key: 'userRoleName'
        },
        {
          title: '状态',
          dataIndex: 'userStatus', // 状态（0.,否 1.启用）
          key: 'userStatus',
          customRender: (text, row) => {
            if (text == 1) {
              return '启用'
            }
            return '禁用'
          }
        },
        {
          title: '操作',
          dataIndex: 'operation',
          scopedSlots: { customRender: 'operation' }
        }
      ]
    }
  },
  components: {
    UserInfo
  },
  computed: {
    ...mapState({
      userInfo: state => state.userInfo || {}
    })
  },
  created () {
    // this.getUserRoles();
  },
  mounted () {
  },
  methods: {
    getUserRoleName (value) {
      for (let i = 0; i < this.roleIdTypeOptions.length; i++) {
        if (this.roleIdTypeOptions[i].value == value) {
          return this.roleIdTypeOptions[i].label
        }
      }
      return ''
    },
    async getUserRoles () {
      let res = await this.$get('/shop/userrole/page', {
        shopId: this.userInfo.shopId
      })
      if (res && res.returnCode == '1000' && res.dataInfo && res.dataInfo.length > 0) {
        this.roleIdTypeOptions = res.dataInfo.map(item => {
          return {
            label: item.roleName,
            value: item.id
          }
        })
        console.log('this.roleIdTypeOptions', this.roleIdTypeOptions)
      }
    },
    // 停止/启用
    openStop (record) {
      console.log('this.userInfo===', this.userInfo)
      let status = record.userStatus == 1 ? 0 : 1
      this.$confirm({
        title: status ? '启用提示' : '停用提示',
        content: status ? '确定启用操作？' : '确定停用操作？',
        okText: status ? '确认启用' : '确认停用',
        cancelText: '取消',
        onOk: () => {
          this.$post('/shop/user/status', { status, id: record.id }).then(res => {
          if (res && res.returnCode == 1000) {
              this.$message.success((status ? '启用' : '停用') + '成功')
              this.$refs.searchtable.refreshTable()
           }
          })
        }
      })
    },
    // resetPas (record) {
    //   this.$confirm({
    //     title: '重置密码',
    //     okText: "确认",
    //     cancelText: "取消",
    //     centered: true,
    //     content: '确认将密码重置为“123456”？',
    //     onOk:()=> {
    //       return new Promise((resolve, reject) => {
    //         this.$post(`/sys/users/${record.id}/password/reset`).then(res => {
    //           if (res && res.returnCode === 1000) {
    //             this.$message.success('密码重置成功');
    //             resolve();
    //           } else {
    //             reject()
    //           }
    //         }).catch(() => reject());
    //       });
    //     }
    //   });
    // },
    closeInfoModal (freshTable) {
      this.infoVisible = false
      if (freshTable) {
        this.$refs.searchtable.refreshTable()
      }
    },
    openInfo (record) {
      this.currentRecord = record
      this.infoVisible = true
    },
    deleteRows (ids) {
      if (!ids || ids.length === 0) return this.$message.warn('请先选择一项后再进行操作')
      this.$confirm({
        title: '删除提示',
        content: '删除操作不可恢复，请确认是否删除？',
        okText: '确认删除',
        cancelText: '取消',
        onOk: () => {
          this.$post('/shop/user/delete', ids).then(res => {
            if (res && res.returnCode == 1000) {
              this.$message.success('删除成功')
              this.$refs.searchtable.refreshTable()
            }
          })
        }
      })
    },
    exportExcel () {
      const params = this.$refs.searchtable.searchParams || {}
      const selectedIds = this.$refs.searchtable.selectedRowKeys
      if (selectedIds && selectedIds.length) {
        params['ids'] = selectedIds.join(',')
      }
      this.$export('/shop/user/export', params)
    }
  }
}
</script>
<style lang="less" scoped>

</style>
